<template>
	<view>
		<topTitle :name="`添加银行卡`" right back class="bg_w"/>
		<view class="content pdx-32 pdy-20">
			<view class="box pdy-16 pdx-20">
				<view class="fs14 h-100 flex j-c-b f-a-c border-b">
					<view>银行卡号</view>
					<input class="text-r" v-model="form.bankAccountNo" type="number" placeholder="请输入银行卡号">
				</view>
				<view class="fs14 h-100 flex j-c-b f-a-c border-b">
					<view>银行预留手机号</view>
					<input class="text-r" v-model="form.bankMobile" type="number" placeholder="请输入银行预留手机号">
				</view>
				<view class="fs14 h-100 flex j-c-b f-a-c">
					<view>验证码</view>
					<view class="flex f-a-c">
						<input class="text-r" v-model="form.smsCode" type="number" placeholder="请输入验证码">
						<text style="margin: 0 12rpx;" class="color-9">|</text>
						<view class="code" :class="time?'color-9':'color-theme'" @click="getCode">{{ time ? time : "获取验证码" }}</view>
					</view>
				</view>
			</view>
			<view class="set bg-theme color-w" @click="confirm">
				确认绑卡
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					bankAccountNo:'',
					bankMobile:'',
					smsCode:'',
				},
				time:0,
				cardId:'',
				requestNo:''
			}
		},
		onLoad(){
			this.util.req(this.api.apiMemberWallet).then(res=>{
				this.requestNo = res.data.requestNo
			})
		},
		methods: {
			confirm(){
				if(!this.form.smsCode){
					uni.showToast({
						title:'请输入验证码',
						icon:'none'
					})
					return false
				}
				this.util.req(this.api.apiDoConfirmVerify,{
					requestNo:this.requestNo,
					smsCode:this.form.smsCode,
					id:this.cardId
				}).then(res=>{
					uni.showToast({
						title:'绑定成功',
						icon:'none'
					})
					uni.navigateBack()
				})
			},
			getCode(){
				if(!this.form.bankMobile){
					uni.showToast({
						title:'请输入银行预留手机号',
						icon:'none'
					})
					return false
				}
				if(this.time){
					return false
				}
				this.util.req(this.api.apiDoBindCard,{
					requestNo: this.requestNo,
					bankAccountNo: this.form.bankAccountNo,
					bankMobile: this.form.bankMobile
				}).then(res=>{
					this.cardId = res.data
					this.time = 60
					let time = setInterval(()=>{
						this.time--
						if(time==0){
							clearInterval(time)
						}
					},1000)
				})
			},
		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style scoped>
	.w-646{
		width: 646rpx;
	}
	.h-380{
		height: 380rpx;
	}
	.h-100{
		height: 100rpx;
	}
	.box {
		background: #fff;
		border-radius: 16rpx;
		border: 2rpx solid #eee;
		margin-bottom: 36rpx;
	}
	.set {
		width: 688rpx;
		height: 92rpx;
		line-height: 92rpx;
		border-radius: 20rpx;
		text-align: center;
		margin: 0 auto;
		font-size: 28rpx;
	}
	.pdy-16{
		padding-top: 16rpx;
		padding-bottom: 16rpx;
	}
	.border-b{
		border-bottom: 1px solid #eeeeee;
	}
	.text-r{
		text-align: right;
	}
</style>
